<!--
 * @Description: 网易严选-人气推荐
 * @Author: rendc
 * @Date: 2021-08-11 14:24:21
 * @LastEditors: rendc
 * @LastEditTime: 2021-08-11 16:57:27
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易严选-人气推荐</title>
  <!-- 外部样式表 -->
  <!-- <link rel="stylesheet" href="style.css"> -->
  <!-- 内部样式表 -->
  <style>
    html,
    body {
      width: 1250px;
      margin: 0;
      padding: 0;
      color: #333333;
    }

    .header {
      margin-top: 60px;
      padding-top: 60px;
    }

    /* 选择器 */
    .popularity {
      margin-bottom: 60px;
      height: 780px;
      background-color: #f4f0eb;
    }

    .header>.name {
      margin: 0px 20px 0px 100px;
      padding-top: 0px;
      font-size: 28px;
      display: inline-block;
    }

    .header>.name:hover {
      color: #b1a07d;
      cursor: pointer;
    }

    .headerLeft {
      display: inline-block;
      margin: 10px 20px 10px 10px;
      padding-left: 10px;
      padding-right: 10px;
    }

    .headerLeft:hover {
      cursor: pointer;
      color: #b1a07d;
    }

    .checked {
      color: #b1a07d;
      border-bottom: 2px solid #b1a07d;
    }

    .headerRight {
      margin-top: 20px;
      margin-right: 60px;
      float: right;
      display: inline;
    }

    .headerRight:hover {
      cursor: pointer;
      color: #b1a07d;
    }

    .headerRight,
    .headerLeft {
      font-size: 14px;
    }

    #productItemFirst {
      margin-left: 0px;
      width: 390px;
      height: 570px;
    }

    #productItemFirst>:nth-child(2) {
      width: 320px;
      margin: 40px 35px;
    }

    #productItemFirst>:first-child {
      width: 48px;
      height: 48px;
      position: absolute;
    }

    #productItemFirst>:nth-child(2):hover {
      margin: 35px 30px;
      width: 336px;
      height: 336px;
      cursor: pointer;
    }

    .productItem {
      margin-left: 10px;
      background-color: white;
      width: 223px;
      height: 280px;
      float: left;
    }


    .productItem>:nth-child(2) {
      width: 180px;
      margin: 0 21.5px;
    }

    .productItem>:first-child {
      width: 48px;
      height: 48px;
      position: absolute;
    }

    .productItem>:nth-child(2):hover {
      margin: 0 18px;
      width: 189px;
      height: 189px;
      cursor: pointer;
    }

    .product {
      margin-left: 100px;
    }

    .product>:nth-child(5),
    .product>:nth-child(6),
    .product>:nth-child(7) {
      margin-top: 10px;
    }

    #productItemFirst>.title {
      width: 100%;
      text-align: center;
      border-top: 1px solid #f4f0eb;
    }

    #productItemFirst>.title>.name {
      margin: 40px 71px 13px 71px;
      padding-top: 0px;
      font-size: 18px;
      display: inline-block;
    }

    #productItemFirst>.title>.name:hover {
      color: #b1a07d;
      cursor: pointer;
    }

    #productItemFirst>.title>.price {
      color: #D4282D;
      font-size: 18px;
    }

    /* 其它商品卡片的title样式 */
    .productItem>.title {
      width: 100%;
      text-align: center;
      border-top: 1px solid #f4f0eb;
    }

    .productItem>.title>.name {
      margin: 0 43.5px 4px;
      padding-top: 0px;
      font-size: 13px;
      display: inline-block;
    }

    .productItem>.title>.name:hover {
      color: #b1a07d;
      cursor: pointer;
    }

    .productItem>.title>.price {
      color: #D4282D;
      font-size: 13px;
      margin: 0;
    }

    .productItem>.title>.price>span {
      color: #999999;
      text-decoration: line-through;
    }

    .productItem>.title>.prdtTags {
      margin: 4px 11.5px 4px;
      font-size: 12px;
    }

    .productItem>.title>.prdtTags>span {
      color: white;
      background-color: #E36844;
    }
  </style>
</head>

<body>
  <!-- 行内样式 <div class="popularity" style=""> -->
  <div class="popularity">
    <div class="header">
      <h3 class="name">人气推荐</h3>
      <div class="headerLeft checked">编辑推荐</div>
      <div class="headerLeft">热销总榜</div>
      <div class="headerRight">更多推荐></div>
    </div>
    <div class="product">
      <div id="productItemFirst" class="productItem">
        <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
        <img
          src="https://yanxuan-item.nosdn.127.net/bebff6d69027991f02077dc1f249059f.png?type=webp&quality=95&thumbnail=320x320&imageView"
          alt="图片丢失">
        <div class="title
        ">
          <h4 class="name">
            口袋里的咖啡馆 浓缩胶囊咖啡 焦糖拿铁1袋
          </h4>
          <p class="price">¥21.8</p>
        </div>
      </div>
      <div class="productItem">
        <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
        <img
          src="https://yanxuan-item.nosdn.127.net/55f4fcc2773ac277d0c84138e9b7489b.png?type=webp&quality=95&thumbnail=180y180&imageView"
          alt="图片丢失">
        <div class="title
        ">
          <div class="prdtTags"><span>99选9</span></div>

          <h4 class="name">
            无添加蔗糖，澳洲进口 即食燕麦片 1千克
          </h4>
          <p class="price">¥19
            <span>
              ¥28
            </span>

          </p>
        </div>
      </div>
      <div class="productItem"> <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
        <img
          src="https://yanxuan-item.nosdn.127.net/6b9d93eae44995e560bcaf9154becee4.png?type=webp&quality=95&thumbnail=180y180&imageView"
          alt="图片丢失">
        <div class="title
        ">
          <div class="prdtTags"><span>99选9</span></div>

          <h4 class="name">
            惊喜藏在蛋黄里，翻砂卤蛋 245克
          </h4>
          <p class="price">¥18
            <span>
              ¥19.9
            </span>

          </p>
        </div></div>
      <div class="productItem"> <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
        <img
          src="https://yanxuan-item.nosdn.127.net/2c0147161faaa160cf10b6770f1e290d.png?type=webp&quality=95&thumbnail=180y180&imageView"
          alt="图片丢失">
        <div class="title
        ">
          <div class="prdtTags"><span>每日抄低</span></div>

          <h4 class="name">
            清新英国梨香，强力去污 酵素洗衣液 3千克
          </h4>
          <p class="price">¥21.9
            <span>
              ¥35
            </span>

          </p>
        </div></div>
      <div class="productItem"> <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
        <img
          src="https://yanxuan-item.nosdn.127.net/0736325df88942d67a31b5bd5bb2a502.png?type=webp&quality=95&thumbnail=180y180&imageView"
          alt="图片丢失">
        <div class="title
        ">
          <div class="prdtTags"><span>3件8.5折</span></div>

          <h4 class="name">
            无添加蔗糖，苏打饼干 360克
          </h4>
          <p class="price">¥12.8
            <span>
              ¥16.8
            </span>
          </p>
        </div></div>
      <div class="productItem"> <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
        <img
          src="https://yanxuan-item.nosdn.127.net/0dee0387a9cd03759b243bd4f887d223.png?type=webp&quality=95&thumbnail=180y180&imageView"
          alt="图片丢失">
        <div class="title
        ">
          <div class="prdtTags"><span>59选2</span></div>

          <h4 class="name">
            新疆长绒棉 男士圆领T恤 
          </h4>
          <p class="price">¥69
            <span>
              ¥88
            </span>
          </p>
        </div></div>
      <div class="productItem"> <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
        <img
          src="https://yanxuan-item.nosdn.127.net/e3fdeaf58254e6016666f560347dbe56.png?type=webp&quality=95&thumbnail=320x320&imageView"
          alt="图片丢失">
        <div class="title
        ">
          <div class="prdtTags"><span>99选9</span></div>

          <h4 class="name">
            红杏干 180克
          </h4><br>
          <p class="price">¥20
            <span>
              ¥29.9
            </span>
          </p>
        </div></div>
    </div>
  </div>
</body>

</html>